<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="include :: head">page head</head>

<body class="text-center">

<div class="container d-flex h-100 p-3 mx-auto flex-column">
	<div th:replace="include :: top">header goes here.</div>
	
	<main role="main" class="inner cover" id="app">
		<div class="container wallet-info p-4" v-show="showWalletInfo">
			<div class="row">
				<div class="col-md-8 text-left">
					<h4 class="font-weight-normal">
						<span>Address：</span>
						<span class="badge badge-info">{{address}}</span>
					</h4>
					<h4 class="font-weight-normal mt-3">
						<span>Balance：</span>
						<span class="badge badge-info">{{balance}} FIL</span>
					</h4>
				</div>
				
				<div class="col-md-4">
					<img :src="'http://qr.topscan.com/api.php?w=200&h=200&text='+address" class="img-thumbnail">
					<p class="font-weight-normal mt-2">扫一扫，给我转账</p>
				</div>
			</div>
		</div>
		<ul class="nav nav-tabs" id="walletTab" role="tablist" v-show="!showWalletInfo">
			<li class="nav-item">
				<a class="nav-link active" data-toggle="tab" href="#importPrivateKey" role="tab"
				   aria-controls="home" aria-selected="true">导入私钥</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" data-toggle="tab" href="#importWalletFile" role="tab"
				   aria-controls="profile" aria-selected="false">导入钱包文件</a>
			</li>
		</ul>
		<div class="tab-content p-4" id="walletTabContent" v-show="!showWalletInfo">
			
			<div class="tab-pane fade show active" id="importPrivateKey" role="tabpanel" aria-labelledby="home-tab">
				<form class="text-left">
					<div class="form-group">
						<label>请输入钱包私钥</label>
						<input type="text" name="privateKey" v-model="privateKey" class="form-control"
						       placeholder="钱包私钥">
					</div>
					
					<button type="button" v-on:click="importWallet" style="padding: 0.55rem 1.25rem;"
					        class="mt-4 btn btn-primary btn-block">确定导入</button>
				</form>
			</div>
			<div class="tab-pane fade" id="importWalletFile" role="tabpanel" aria-labelledby="profile-tab">
				<button class="btn btn-primary" id="upload-btn">选择钱包文件</button>
			</div>
		</div>
	
	</main>
	
	<div th:replace="include :: footer">footer goes here.</div>
</div>

<script>
	var App = new Vue({
		el: "#app",
		data: {
			privateKey: "",
			showWalletInfo: false,
			balance: 0,
			address: ""
		},
		methods: {
			importWallet: function () {
				var that = this;
				if (this.privateKey.trim() == '') {
					return messageError("请输入正确的私钥.");
				}
				var loading = messageLoading();
				setTimeout(function () {
					httpPost("/api/filecoin/wallet/import/privateKey", {
						privateKey : that.privateKey
					}, function (res) {
						var data = res.data;
						that.address = data.address;
						that.balance = data.balance;
						that.showWalletInfo = true;
						loading.hide();
						messageOk("导入钱包成功.");
						localStorage.setItem("address", data.address);
					}, function (message) {
						messageError(message);
						loading.hide();
					});
				}, 500);
				
			}
		}
	});
	
	$(document).ready(function () {
		var loader = null;
		$("#upload-btn").JUpload({
			url : "/api/filecoin/wallet/import/file",
			src : "file",
			extAllow : "json",
			maxFileNum: 1,
			onSuccess : function (data) {
				App.$data.address = data.address;
				App.$data.balance = data.balance;
				setTimeout(function () {
					loader.hide();
					messageOk("导入钱包成功.");
					localStorage.setItem("address", data.address);
					App.$data.showWalletInfo = true;
				}, 500)
			},
			onStart: function() {
				loader = messageLoading();
			},
			messageHandler : function (message) {
				messageError(message);
			},
		});
	})
</script>
</body>
</html>